<template>
    <el-dialog title="打开文件" :visible.sync="getDialogStatus.stOpenFile">
        <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="!fileList">
            <el-tab-pane label="静静" name="first">
                
               <div class="fileList-box">
                    <div v-for="(item,index) in fileList" 
                    :key="index" 
                    class="file-list" 
                    @dblclick.prevent="loadTable(index)">
                        <span style="width:50%">{{item.stmt_title}}</span>
                        <span style="width:30%">{{item.created_at}}</span>
                        <span style="width:10%">
                            <el-button 
                                size="mini" 
                                type="danger" 
                                icon="el-icon-delete" circle
                                @click="showConfirm(index)"></el-button>
                        </span>
                    </div>
               </div>
            
            </el-tab-pane>
            <el-tab-pane label="本地" name="second">
                <el-button type="primary">打开文件</el-button>
            </el-tab-pane>
        </el-tabs>
        <br><br>
        

        <el-dialog
        title="提示"
        :visible.sync="confirmDialog"
        width="30%"
        append-to-body>
        <span>确定要删除该文件吗？删除后将不可恢复</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="confirmDialog = false">取 消</el-button>
            <el-button type="primary" @click="deleteFile()">确 定</el-button>
        </span>
        </el-dialog>
        

    </el-dialog>
</template>

<script>

import { mapMutations, mapGetters } from "vuex";

export default {
    props: {},
    data() {
        return {
            activeName:'',
            fileList:[],

            confirmDialog:false,
            currentFile:{
                index:0,
            }
        };
    },
    computed: {
        ...mapGetters(["getDialogStatus"])
    },
    watch: {},
    methods: {
        ...mapMutations(["setDialogStatus", "closeAllDialog", "loadingFile","setLoading"]),
        openFile() {
            this.setDialogStatus({
                key: "stOpenFile",
                value: false
            });
        },
        loadingFileList() {
            axios.get(config.PATH+'main_table').then((res)=>{
                this.fileList=res.data.data;
                console.log(res.data.data);
            });
        },
        handleClick(v,n){
            if(this.activeName=='first'){
                this.loadingFileList();
            }else if(this.activeName=='second'){

            }
        },
        loadTable(index){
            this.setLoading({
                status:true,
                msg:'文件正在加载'
            })
            axios.get(config.PATH+'main_table/'+this.fileList[index].id).then((res)=>{
                this.openFile();
                this.setLoading({
                    status:true,
                    msg:'文件正在打开'
                })
                this.loadingFile(res.data.data);
                this.$router.push('/sheets');
            });
        },
        deleteFile(){
            axios.delete(config.PATH+'main_table/'+this.fileList[this.currentFile.index].id).then((res)=>{
                if(res.data.status){
                    this.$message({
                        type:'success',
                        message:'删除文件成功'
                    })
                }else{
                    this.$message({
                        type:'error',
                        message:'删除文件失败'
                    })
                }
                this.fileList.splice(this.currentFile.index,1);
                this.confirmDialog=false;
            })
        },
        showConfirm(index){
            this.confirmDialog=true;
            this.currentFile.index=index;
        }
    }
};
</script>

<style>

.el-dialog__body{
    padding: 0px 20px;
}
.fileList-box{
    width: 100%;
    max-height: 500px;
    overflow: auto;
}
.file-list{
    width: 98%;
    padding: 1% ;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    user-select:none;   
}
.file-list span{
    display: inline-block;
}
.file-list:hover{
    background: #409EFF;
    color: #fff
}

</style>
